<template>
  <div>
    <van-tabbar
      v-model="active"
      active-color="#ee0a24"
      inactive-color="#000"
      @change="onChange"
    >
      <van-tabbar-item>
        <i class="iconfont icon-dianyingpiaoiocn" slot="icon"></i>
        电影
      </van-tabbar-item>
      <van-tabbar-item>
        <i class="iconfont icon-yingyuan" slot="icon"></i>
        影院
      </van-tabbar-item>
      <van-tabbar-item>
        <i class="iconfont icon-xinwenzixun" slot="icon"></i>
        资讯
      </van-tabbar-item>
      <van-tabbar-item>
        <i class="iconfont icon-shouye" slot="icon"></i>
        我的
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  /* created() {
    // 刷新页面底部导航问题
    const path = this.$route.path
    console.log(this.$route)
    let index = this.urlArr.indexOf(path)
    if (index < 0 && path === '/movie/future') {
      index = 0
    }
    this.active = index
  }, */
  /* mounted() {
    // 刷新页面顶部导航问题
    const path = this.$route.path
    console.log(path)
    let index = this.urlArr.indexOf(path)
    if (index < 0) {
      index = 0
    }
    this.active = indexfF
  }, */
  watch: {
    $route: {
      handler(val) {
        const path = val.path
        let index = this.urlArr.indexOf(path)
        if (index < 0) {
          index = 0
        }
        this.active = index
      }
    }
  },
  data() {
    return {
      active: 0,
      urlArr: ['/movie/playing', '/cinema/clist', '/news', '/my']
    }
  },
  methods: {
    onChange(index) {
      this.$router.push(this.urlArr[index])
    }
  }
}
</script>

<style>
</style>
